/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react'
import { Card,Table, Tag, Space } from 'antd';
import axios from '../../axios/index';
export default class basicTable extends Component {
    // 初始化数据
    state= {
      columns:[
        {
          title: '名字',
          dataIndex: 'name',
          key: 'name',
          render: text => <a>{text}</a>,
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '地址',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: '标签',
          key: 'tags',
          dataIndex: 'tags',
          render: tags => (
            <>
              {tags.map(tag => {
                let color = tag.length > 5 ? 'geekblue' : 'green';
                if (tag === 'loser') {
                  color = 'volcano';
                }
                return (
                  <Tag color={color} key={tag}>
                    {tag.toUpperCase()}
                  </Tag>
                );
              })}
            </>
          ),
        },
        {
          title: '行为',
          key: 'action',
          render: (text, record) => (
            <Space size="middle">
              <a>Invite {record.name}</a>
              <a>Delete</a>
            </Space>
          ),
        },
      ],
      columns2:[
        {
          title: 'id',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
          render: text => <a>{text}</a>,
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '性别',
          dataIndex: 'sex',
          render(sex){
            return sex===1?'男':'女'
          }
        },
        {
          title: '日期',
          dataIndex: 'datatime',
          key: 'datatime',
        },
        {
          title: '邮箱',
          dataIndex: 'email',
          key: 'email',
        },
      ],
      data: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher'],
        },
      ],
      data2:[]
    }

    // 动态获取mock数据(未封装前的写法)
    // request=()=>{
    //   axios.get('https://www.fastmock.site/mock/b187e7691277665a9024766157b6aac3/imooc/table/list').then((res)=>{
    //   if(res.status === 200 && res.data.code === "200"){
    //     this.setState({
    //         data2:res.data.data.list
    //       });
    //     }
    //   });
    // }

    // 动态获取mock数据
    request=()=>{
      axios.ajax({
        url:'/table/list',
        data:{
          isShowLoading:true
        }
      }).then((res)=>{
        if(res.data.code === "200"){
          this.setState({
            data2: res.data.data.list
          });
        }
      });
    }
    // 组件挂载完毕的钩子
    componentDidMount(){ 
      this.request();
    }
    render() {
        return (
            <div className="card-content">
                <Card title="基础表格">
                    <Table columns={this.state.columns} dataSource={this.state.data} bordered pagination={false}/>
                </Card>
                <Card title="动态表格渲染" style={{margin:'10px 0'}}>
                    <Table columns={this.state.columns2} dataSource={this.state.data2} bordered/>
                </Card>
            </div>
        )
    }
}
